<template>
  <Page header="审核任务详情" :isBack="true">
    <div style="display: flex;flex-direction: column;height: 100%;overflow:hidden;">
      <div style="flex-grow: 1;overflow:hidden ">
        <scroll-view scroll-y="true" style="height: 100%">
          <div class="detail-card">
            <div class="card">
              <div class="card-header">
                <div class="line"></div>
                <div class="title">  接单用户： {{ taskRecordDetail.user.nickname }}</div>
              </div>
            </div>
          </div>
          <div class="detail-card">
            <div class="card">
              <div class="card-header">
                <div class="line"></div>
                <div class="title">{{ taskDetail.name }}</div>
                <div class="price">
                  + {{ taskDetail.price }}元
                </div>
              </div>
            </div>
          </div>
          <div class="detail-card">
            <div class="card">
              <div class="card-body" style="padding: 0 24rpx">
                <u-form>
                  <u-form-item label="截止日期" label-width="120px">
                    <div style="text-align: right;width: 100%;overflow:hidden;word-break: break-all;line-height: 28rpx;color: #666666">
                      {{taskDetail.end_time }}
                    </div>
                  </u-form-item>
                  <u-form-item label="任务描述" label-width="120px">
                    <div style="text-align: right;width: 100%;overflow:hidden;word-break: break-all;line-height: 28rpx;color: #666666">
                      {{ taskDetail.description }}
                    </div>
                  </u-form-item>
                </u-form>
              </div>
            </div>
          </div>
          <div class="detail-card" v-for="(item,index) in stepList" :key="index">
            <div class="card">
              <div class="card-header">
                <div class="line"></div>
                <div class="title">步骤{{ index + 1}}</div>
                <div
                    @click="copyValue(item.description)"
                    class="price" style="color: #333333;font-weight: bold" v-if="item.type === 2 || item.type === 8">
                  点击复制
                </div>
              </div>
              <div class="card-body" style="padding:0 24rpx">
                <div class="step-list">
                  <div class="step-wrapper">
                    <!-- 图文  -->
                    <div class="step-item">
                      <div style="font-weight: bold;font-size: 32rpx;padding: 12rpx 0">
                        {{ item.description }}
                      </div>
                      <div class="avatar-list" style="display: flex;align-items: center">
                        <div :class="['avatar-item']" v-for="file in item.fileList" style="margin: 0 10rpx">
                          <u-image @click="viewImage(file)" :src="file" width="280rpx" height="750rpx" mode="aspectFit" ></u-image>
                        </div>
                        <div
                            v-if="item.type !== 2 && item.type !== 10"
                            :class="['avatar-item']" v-for="file in item.fileListValue || []" style="margin: 0 10rpx">
                          <u-image @click="viewImage(file)" :src="file" width="280rpx" height="750rpx" mode="aspectFit" ></u-image>
                        </div>
                         </div>
                      <div
                          v-if="item.type === 10"
                          class="input-border">
                        <u-input
                            :placeholder="item.description"
                            border input-align="left" disabled v-model="item.textValue" type="textarea"/>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </scroll-view>
      </div>
      <div v-if="isSubmit" class="button-group" style="flex-shrink: 0;display: flex;align-items: center;justify-content: space-around">
        <div class="primary-button large" style="width: 45%;background-color: #666666" @click="reject(taskRecordDetail)">拒绝</div>
        <div class="primary-button large" style="width: 45%"@click="pass(taskRecordDetail)">通过</div>
      </div>
    </div>
  </Page>
</template>
<script>
import Page from "../../components/Page.vue";
import { mapGetters } from 'vuex';
export default {
  name: "index",
  components: {Page},
  data() {
    return {
      taskDetail: {
        children: []
      },
      action: this.$baseUrl + '/api/upload/file',
      fileList: [],
      endDateShow: false,
      typeShow: false,
      typeList: [
        // 图文、打开指定网址、下载APP、扫描二维码、输入邀请码、复制文字内容、添加多张图片、输入验证口令、收集截屏或者图片、收集文字
        {name: '图文', value: 1},
        {name: '打开指定网址', value: 2},
        {name: '下载APP', value: 3},
        {name: '扫描二维码', value: 4},
        {name: '输入邀请码', value: 5},
        {name: '复制文字内容', value: 6},
        {name: '添加多张图片', value: 7},
        {name: '输入验证口令', value: 8},
        {name: '收集截屏或者图片', value: 9},
        {name: '收集文字', value: 10},
      ],
      currenType: 1,
      stepIndex: 0,
      stepList: [],
      isCancel: false,
      taskRecordDetail: {
        user: {
          nickname: ''
        }
      },
      status: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    isSubmit() {
      if (this.status !== 'wait_audit') return false
      return true
    },
  },
  onLoad({ id, status, record_id }) {
    uni.showLoading({
      title: '加载中',
      mask: true,
      duration: 0
    })
    this.getTaskDetail(id,record_id)
    this.status = status
  },
  methods: {
    getTaskDetail(id,record_id) {
      this.$api.getTaskDetail(id).then(res => {
        this.taskDetail = res
        this.getRecordStatus(record_id)
      }).finally(() => {
        uni.hideLoading()
      })
    },
    getRecordStatus(record_id) {
      this.$api.getTaskRecord({
        id: record_id
      }).then(res => {
        if (res) {
          this.isCancel = res.status === 0
          this.taskRecordDetail = res
        }
        if (res && res.step_list) {
          this.stepList = JSON.parse(res.step_list)
        } else {
          if (this.taskDetail.step_list) {
            this.stepList = JSON.parse(this.taskDetail.step_list)
          }
        }
        console.log(' this.stepList', this.stepList)
      }).finally(() => {
        uni.hideLoading()
      })
    },
    successFile(item, e) {
      item.fileListValue.push(e.data.url)
      console.log(item)
    },
    removeFile(item,index) {
      item.fileListValue.splice(index, 1)
      console.log(item)
    },
    viewImage(file) {
      console.log('viewImage', file)
      uni.previewImage({
        urls: [file]
      })
    },
    copyValue(value) {
      uni.setClipboardData({
        data: value,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      })
    },
    accept() {
      if (!this.userInfo.id) {
        uni.showModal({
          title: '提示',
          content: '请先登录',
          showCancel: true,
          success: function (res) {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/user/login'
              })
            }
          }
        })
        return
      }
      let that = this
      // 确认对话框
      uni.showModal({
        title: '提示',
        content: '确认接受吗？',
        showCancel: true,
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
            uni.showLoading({
              title: '加载中',
              mask: true,
              duration: 0
            })
            that.$api.acceptTask({
              task_id: that.taskDetail.id,
              price: that.taskDetail.price,
              user_id: that.userInfo.id,
            }).then(res => {
              uni.showToast({
                title: '提交成功',
                icon: 'success'
              })
              setTimeout(() => {
                // 重定向到当前页面
                uni.redirectTo({
                  url: `/pages/task/detail?id=${that.taskDetail.id}`
                })
              }, 500)
            }).finally(() => {
              setTimeout(() => {
                uni.hideLoading()
              }, 1000)
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    pass(item) {
      uni.showLoading({
        title: '加载中',
        mask: true,
        duration: 0
      })
      this.$api.auditTaskRecord({
        audit_user_id: this.userInfo.id,
        id: item.id,
        audit_status: 1
      }).then(() => {
        uni.showToast({
          title: '操作成功',
          icon: 'none'
        })
        setTimeout(() => {
          // 重定向接单大厅
          uni.reLaunch({
            url: '/pages/task/audit'
          })
        }, 1000)
      })
    },
    reject(item) {

      uni.showLoading({
        title: '加载中',
        mask: true,
        duration: 0
      })
      this.$api.auditTaskRecord({
        audit_user_id: this.userInfo.id,
        id: item.id,
        audit_status: 0
      }).then(() => {
        uni.showToast({
          title: '操作成功',
          icon: 'none'
        })

        setTimeout(() => {
          // 重定向接单大厅
          uni.reLaunch({
            url: '/pages/task/audit'
          })
        }, 1000)
      })
    },
  }

}
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
.page {
  .status-box {
    padding: 24rpx 24rpx;
    background-color: #f2f2f2;
    .status-item {
      display: flex;
      align-items: center;
      image {
        width: 48rpx !important;
        height: 48rpx !important;
        margin-right: 12rpx;
      }
    }
  }
  .u-input {
    text-align: right;
  }
  .input-border {
    padding: 12rpx;
  }
  .add-box {
    margin: 0 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #05C8CE;
    padding: 18rpx;
    border-radius: 12rpx;
    color: #ffffff;
  }
  .avatar-list {
    display: flex;
    flex-wrap: wrap;
    .avatar-item {
      flex-shrink: 0;
      width: 45%;
      padding: 12rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .detail-card {
    margin: 20rpx;
    border-radius: 24rpx;
    background-color: #ffffff;
  }

  .card {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
    border-radius: 16rpx;

    .card-header {
      height: 100rpx;
      padding-left: 12rpx;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #E6E6E6;

      .price {
        flex-grow: 1;
        text-align: right;
        font-size: 32rpx;
        color: #dd524d;
        font-weight: bold;
        padding-right: 24rpx;
      }
      .line {
        width: 8rpx;
        height: 36rpx;
        background-color: #05C8CE;
        border-radius: 3rpx 3rpx 3rpx 3rpx;
      }

      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #303030;
        text-align: left;
        padding-left: 20rpx;
        font-style: normal;
        text-transform: none;
        flex-grow: 1;
      }

    }

    .card-body {
      .item {
        padding: 50rpx;
      }

      .content {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #3D3D3D;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 30rpx;
      }
    }
  }

  .file-list {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;

    .file-info {
    }

    .file-item {
      margin-right: 20rpx;
      margin-top: 20rpx;
      width: 120rpx;
      height: 160rpx;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;

      .pdf {
        width: 50px;
        height: 50px;
      }

      .preview,
      .download {
        width: 14px;
        height: 13px;
        margin-top: 12rpx;
        //position: absolute;
        //right: 4px;
        //top: 50%;
        //transform: translateY(-45%);
      }

      .preview {
        width: 18px;
        height: 18px;
        right: 28px;
      }

      .file-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .file-name {
          font-family: Source Han Sans;
          font-size: 14px;
          font-weight: normal;
          line-height: 16px;
          color: #262626;
          padding-right: 40px;
        }

        .file-size {
          font-family: Source Han Sans;
          font-size: 14px;
          font-weight: normal;
          line-height: 14px;
          color: #9D9D9D;
          padding-right: 40px;
        }

        .file-line {
          width: 100%;
          height: 2px;
          opacity: 1;
          background: #EBEBEB;
        }
      }
    }
  }

}
</style>
